<!--
 * 指示器
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <!-- 圆点模式 -->
    <pure-indicator-dot v-if="mode === 'dot'" :count="count" :current="current" @onClick="handleClick" :hoverClass="hoverClass"></pure-indicator-dot>

    <!-- 条状模式 -->
    <pure-indicator-bar v-else-if="mode === 'bar'" :count="count" :current="current" @onClick="handleClick" :hoverClass="hoverClass"></pure-indicator-bar>

    <!-- 线模式 -->
    <pure-indicator-line v-else-if="mode === 'line'" :count="count" :current="current" @onClick="handleClick" :hoverClass="hoverClass"></pure-indicator-line>

    <!-- 数字模式 -->
    <pure-indicator-number v-else-if="mode === 'number'" :count="count" :current="current" :hoverClass="hoverClass"></pure-indicator-number>

    <!-- 下标模式 -->
    <pure-indicator-index v-else-if="mode === 'index'" :count="count" :current="current" @onClick="handleClick" :hoverClass="hoverClass"></pure-indicator-index>

    <!-- 标题模式 -->
    <pure-indicator-title v-else-if="mode === 'title'" :list="list" :current="current" @onClick="handleClick" :hoverClass="hoverClass"></pure-indicator-title>

    <!-- 进度模式 -->
    <pure-indicator-progress v-else-if="mode === 'progress'" :count="count" :current="current" :hoverClass="hoverClass"></pure-indicator-progress>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: ["onClick"],
        computed: {
            // classes
            classes() {
                const classes = [];
                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },
        },
        methods: {
            // 点击事件
            handleClick(current) {
                this.$emit("onClick", current);
            },
        },
    };
</script>
